<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入偏爱图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <!-- 引入font-awesome环境文件中的css链接 -->
    <link rel="stylesheet" href="./fontawesome/css/all.css">

    <!-- 引入自己定义的css文件(通用属性的css文件) -->
    <link rel="stylesheet" href="./css/style.css">

</head>

<body>
    <!-- 建议将整个页面放到一个容器container中,不建议直接放在body中 -->
    <main class="container">
        <!-- 左侧个人概要侧边栏 -->
        <aside class="profile">
            <img src="./images/m1.jpg" alt="">
            <h3>新中地</h3>
            <p>WebGis工程师</p>
            <div class="share">
                <a href="" class="fa-brands fa-github"></a>
                <a href="" class="fa-brands fa-weibo"></a>
                <a href="" class="fa-brands fa-weixin"></a>
                <a href="" class="fa-brands fa-qq"></a>
            </div>
            <a href="" class="me">联系我</a>
        </aside>
        <!-- 右边详细信息侧边栏 -->
        <aside class="information">
            <!-- 个人介绍区域 -->
            <section class="about">
                <h3 class="title">个人介绍</h3>
                <p>2022年毕业于武汉大学计算机科学专业，学校主修方向为计算机前端，大四在字节跳动公司完成了1年的实习。</p>
                <p>对前端主流技术生态体系有一定的理解，能够运用主流技术框架解决常见业务问题，英语和数学能力优异，期望在前端领域持续深入地学习。</p>

                <div class="box-container">
                    <div class="box">
                        <h3><span>年龄:</span>22</h3>
                        <h3><span>住址</span>武汉市洪山区</h3>
                        <h3><span>手机号:</span>18812345678</h3>
                        <h3><span>email:</span>xzd@webgis.com</h3>
                    </div>
                    <div class="box">
                        <h3><span>岗位:</span>WebGis开发工程师</h3>
                        <h3><span>外语:</span>英语六级</h3>
                        <h3><span>工作经验:</span>1年</h3>
                        <h3><span>到岗时间:</span>随时</h3>
                    </div>
                </div>
            </section>
            <section class="servers">
                <h3 class="title">技术栈</h3>

                <div class="box-container">
                    <div class="box">
                        <img src="images/icon-1.png" alt="">
                        <h3>html5</h3>
                    </div>
                    <div class="box">
                        <img src="images/icon-2.png" alt="">
                        <h3>css3</h3>
                    </div>
                    <div class="box">
                        <img src="images/icon-3.png" alt="">
                        <h3>JavaScript</h3>
                    </div>
                    <div class="box">
                        <img src="images/icon-4.png" alt="">
                        <h3>SASS</h3>
                    </div>
                    <div class="box">
                        <img src="images/icon-5.png" alt="">
                        <h3>JQuery</h3>
                    </div>
                    <div class="box">
                        <img src="images/icon-6.png" alt="">
                        <h3>React.js</h3>
                    </div>

            </section>
            <section class="skills">
                <h3 class="title">技术熟练度</h3>
                <div class="box-container">
                    <div class="progress">
                        <!-- 上层文字 -->
                        <h3>html<span>95%</span></h3>
                        <!-- 下层进度条 -->
                        <div class="outer">
                            <div class="inner" style="width:95%"></div>
                        </div>
                    </div>
                    <div class="progress">
                        <!-- 上层文字 -->
                        <h3>css<span>80%</span></h3>
                        <!-- 下层进度条 -->
                        <div class="outer">
                            <div class="inner" style="width:80%"></div>
                        </div>
                    </div>
                    <div class="progress">
                        <!-- 上层文字 -->
                        <h3>JavaScript<span>65%</span></h3>
                        <!-- 下层进度条 -->
                        <div class="outer">
                            <div class="inner" style="width:65%"></div>
                        </div>
                    </div>
                    <div class="progress">
                        <!-- 上层文字 -->
                        <h3>Photoshop<span>70%</span></h3>
                        <!-- 下层进度条 -->
                        <div class="outer">
                            <div class="inner" style="width:70%"></div>
                        </div>
                    </div>
                    <div class="progress">
                        <!-- 上层文字 -->
                        <h3>JQuery<span>95%</span></h3>
                        <!-- 下层进度条 -->
                        <div class="outer">
                            <div class="inner" style="width:95%"></div>
                        </div>
                    </div>
                    <div class="progress">
                        <!-- 上层文字 -->
                        <h3>react<span>80%</span></h3>
                        <!-- 下层进度条 -->
                        <div class="outer">
                            <div class="inner" style="width:80%"></div>
                        </div>
                    </div>
                    <div class="progress">
                        <!-- 上层文字 -->
                        <h3>vue<span>65%</span></h3>
                        <!-- 下层进度条 -->
                        <div class="outer">
                            <div class="inner" style="width:65%"></div>
                        </div>
                    </div>
                    <div class="progress">
                        <!-- 上层文字 -->
                        <h3>small app<span>70%</span></h3>
                        <!-- 下层进度条 -->
                        <div class="outer">
                            <div class="inner" style="width:70%"></div>
                        </div>
                    </div>
                </div>

            </section>
            <section class="experience">
                <h3 class="title">学习工作经历区域</h3>
                <div class="box-container">
                    <div class="box">
                        <span>2018-2022</span>
                        <h3>武汉大学计算机专业</h3>
                        <p>在大学本科期间,通过专业学习和自我学习掌握了主流前端知识体系,能够独立完成拥有一定业务复杂度的前端项目,毕业设计项目获得了老师的高度评价.</p>
                    </div>
                    <div class="box">
                        <span>2021-2022</span>
                        <h3>字节跳动 飞书项目组 前端实习生</h3>
                        <p>2021-2022年在飞书项目组完成了一年的实习工作,解除了解了大型企业的工作流程,对DevOps工作流有了深刻的认识和使用经验.</p>
                        <p>飞书项目组主要采用React技术栈,我个人参与了飞书文档的wev端需要优化,熟悉在线文档的开发.</p>
                    </div>
                </div>
            </section>
            <section class="contact">
                <h3 class="title">联系方式区域</h3>
                <div class="box-container">
                    <div class="box">
                        <i class="fa-solid fa-map"></i>
                        <div class="info">
                            <h3>详细地址</h3>
                            <p>武汉市洪山区中地数码</p>
                        </div>
                    </div>
                    <div class="box">
                        <i class="fa-solid fa-phone"></i>
                        <div class="info">
                            <h3>手机号</h3>
                            <p>18712345678</p>
                        </div>
                    </div>
                    <div class="box">
                        <i class="fa-solid fa-envelope"></i>
                        <div class="info">
                            <h3>emali</h3>
                            <p>xzd@mapgis.com</p>
                        </div>
                    </div>

                </div>
            </section>
        </aside>
    </main>
</body>

</html>